<template>
	<view v-if="available">
		<slot :time="time" :remain="timeData.remain" :day="timeData.day" :hour="timeData.hour" :minute="timeData.minute"
			:second="timeData.second" />
		<!-- <view class="floting">
			<view class="flot-window">
				<view class="addgold" v-if="receive">
					+{{goldcoin}}金币
				</view>
				<view class="gold">
					{{goldcoin}}金币
				</view>
				<view class="bottom">
					<text v-if="receive">今日已领取</text>
					<text v-else>浏览{{timeData.second}}s后可领</text>
				</view>
			</view>
		</view> -->
		<!-- 10.7 -->
		<view class="trans-gold">
			<view class="trans-circle" v-if="receive">
				今日已领取{{goldcoin}}金币
			</view>
			<view class="trans-circle" v-else>
				浏览{{timeData.second}}s后可领{{goldcoin}}金币
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 倒计时时长（单位：毫秒）
			time: {
				type: Number,
				default: 0
			},
			goldcoin: {
				type: Number,
				default: 2
			},
			// receive: {
			// 	type: Boolean,
			// 	default: false
			// },
			available: {
				type: Boolean,
				default: false
			},

			// 是否自动
			'autoStart': {
				type: Boolean,
				default: false
			},
			type: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				timer: null,
				timeData: {
					remain: 0,
					day: 0,
					hour: 0,
					minute: 0,
					second: 0
				},
				receive: false
			};
		},
		watch: {
			time() {
				this.reset()
			}
		},
		methods: {
			// 设置timeData
			updateTimeData() {
				let t = this.timeData.remain;
				this.timeData.day = Math.floor(t / 1000 / 60 / 60 / 24);
				this.timeData.hour = Math.floor((t / 1000 / 60 / 60) % 24);
				this.timeData.minute = Math.floor((t / 1000 / 60) % 60);
				// this.timeData.second = Math.floor((t / 1000) % 60);
				// 10.15 修改 全用s来显示
				this.timeData.second = Math.floor(t / 1000);
			},

			// 9.26 判断是否完成任务
			tasksu(querystate = false) {
				let ttype = {
					type: this.type
				}
				if (querystate) {
					ttype.querystate = 1
				}
				this.$request({
					url: this.$api.gold.index,
					data: ttype
				}).then((res) => {
					if (res.code === 0) {
						if (querystate) {
							if (res.data.isdone == 0) {
								this.receive = false
							} else if (res.data.isdone == 1) {
								this.receive = true
							}
						} else {
							if (res.data.isdone == 1) {
								this.receive = true
							} else if (res.data.isdone == 2) {
								this.receive = true
							}
						}
					}
				}).catch(() => {

				})
			},

			// 开启倒计时
			startTimer() {
				if (this.timer) {
					clearInterval(this.timer);
				}
				// 领取 金币
				if (this.timeData.remain < 1000) {
					return
				}
				this.timer = setInterval(() => {
					this.timeData.remain -= 1000;
					this.updateTimeData()
					if (this.timeData.remain < 1000) {
						this.pause()
						// console.log(999);
						this.receive = true
						// this.$emit('finish');
						this.tasksu()
					}
				}, 1000);
			},

			// 重置倒计时
			reset() {
				this.timeData.remain = this.time;
				this.updateTimeData();
				if (this.autoStart) {
					this.start()
				}
			},

			// 暂停倒计时
			pause() {
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null
				}
			},

			// 开始倒计时
			start() {
				if (this.timer) {
					return
				}
				this.startTimer();
			}
		},
		mounted() {
			this.reset();
			let querystate = true
			this.tasksu(querystate)
			// if (this.receive) {

			// }
		},
		beforeDestroy() {
			this.pause()
		}
	};
</script>

<style scoped lang="scss">
	// 10.7
	.trans-gold {
		position: fixed;
		width: 100%;
		height: 93rpx;
		background-color: #fff;
		z-index: 1500;
		top: 0;
		left: 0;

		.trans-circle {
			width: 686rpx;
			border: 1rpx solid #ff2200;
			margin: 0 auto;
			text-align: center;
			line-height: 68rpx;
			border-radius: 72rpx;
			color: #ff2200;
			font-size: 32rpx;
		}
	}

	.floting {
		position: fixed;
		right: 40rpx;
		top: 258rpx;
		// 9.18
		// top: 156rpx;
		width: 138rpx;

		.flot-window {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			position: relative;
			width: 100%;
			height: 200rpx;
			overflow: hidden;

			.addgold {
				color: #ffae3c;
				font-size: 24rpx;
				position: absolute;
				top: -36rpx;
				opacity: 0;

				// height: 30rpx;
				animation: floatup 0.8s 1;

				@keyframes floatup {
					from {
						top: 36rpx;
						opacity: 1;
					}

					to {
						opacity: 0;
						top: -36rpx;
					}
				}
			}

			.gold {
				// position: relative;
				// top: 110rpx;
				// width: 104rpx;
				// height: 90rpx;
				margin-top: 36rpx;

				width: 90rpx;
				height: 90rpx;
				background-color: #ffea00;
				box-shadow: 0 0rpx 2rpx 0rpx #e2cf00;
				border-radius: 50%;
				text-align: center;
				line-height: 90rpx;
				color: #ffc410;
				font-size: 24rpx;
				text-shadow: 0 0rpx 2rpx #d3a20d;
			}

			.envelope {
				// position: relative;
				// top: 70rpx;
				animation: envelope 1.8s 1;

				@keyframes envelope {
					0% {
						top: 120rpx;
						transform: scaleY(1);
					}

					20% {
						top: 20rpx;
						transform: scaleY(1);
					}

					70% {
						top: 20rpx;
						transform: scaleY(1);
					}

					80% {
						top: 20rpx;
						transform: scaleY(1);
					}

					90% {
						top: 70rpx;
						transform: scaleY(0.9);
					}

					100% {
						top: 70rpx;
						transform: scaleY(1);
					}
				}

				.cover {
					width: 104rpx;
					height: 126rpx;
				}

				.btn {
					// position: absolute;
					// top: 20rpx;
					// left: calc(50% - 25rpx);
					width: 50rpx;
					height: 50rpx;
					animation: btn 0.3s 4;
					animation-direction: alternate;

					@keyframes btn {
						from {
							transform: scale(1);
						}

						to {
							transform: scale(0.6);
						}
					}
				}
			}
		}

		.bottom {
			width: 100%;
			height: 42rpx;
			background: linear-gradient(180deg, #ffe6ac 0%, #ffb66e 100%);
			border-radius: 92rpx;
			font-size: 20rpx;
			font-weight: 500;
			line-height: 42rpx;
			text-align: center;
			color: #854c00;
		}
	}
</style>
